import { Component } from 'react';
import Tab from '../components/Tab'
import Header from '../components/Header'
import './ToDoList.css'
class ToDoList extends Component {
    constructor() {
        super()
        this.state = {
            todos: JSON.parse(localStorage.getItem('todos')) || []
        }
        this.filterToDo('all')
    }

    getTodos = (data) => {
        this.setState({
            todos: [...this.state.todos, data]
        })
        localStorage.setItem('todos', JSON.stringify(this.state.todos))
    }

    filterToDo = (data) =>{
        // console.log(data)
        let arr = JSON.parse(localStorage.getItem('todos')) || []
        if(data === "all") {
            this.setState({
                todos: arr
            })
        } else {
            this.setState({
                todos: arr.filter(item => {
                    return item.type === data
                })
            })
        }
    }
    render() {
        const list = [
            {name: '全部', type: 'all'},
            {name: '正在进行', type: 'isWorking'},
            {name: '已经完成', type: 'isFinished'},
            {name: '删除', type: 'delete'}
        ]
        return (
            <div id="todoList">
                <Header getFun={this.getTodos}/>
                <div className="content">
                   <div>
                       <ul>
                           {
                               this.state.todos.map((item, i) => {
                                return <li key={i}>
                                    <input type="checkbox" onChange={
                                        (e) => {
                                            let checked = e.target.checked
                                            console.log(checked)
                                            if(checked) {
                                                item.type = "isFinished"
                                            } else {
                                                item.type = 'isWorking'
                                            }
                                            this.setState({
                                                todos: this.state.todos
                                            })
                                            localStorage.setItem('todos', JSON.stringify(this.state.todos))
                                        }
                                    } checked={
                                        item.type === "isFinished"
                                    }/>
                                    {item.name}
                                    <button onClick={
                                        () => {
                                            item.type = 'delete'
                                            this.setState({
                                                todos: this.state.todos
                                            })
                                            localStorage.setItem('todos', JSON.stringify(this.state.todos))
                                        }
                                    }>删除</button>
                                </li>
                               })
                           }
                       </ul>
                   </div>
                    
                </div>
                <Tab list={list} type={this.filterToDo}/>
            </div>
        )
    }
}

export default ToDoList